<template>
  <a-card hoverable style="width: 300px" v-bind="$attrs">
    <template #cover>
      <img class="m-img" alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
      <!--  -->
      <!-- src="/src/assets/icon/oil_1.svg" -->
      <!-- src="/src/assets/icon/泵头.svg" -->
      <!-- alt="example" -->
    </template>
    <template #actions>
      <setting-outlined key="setting" />
      <edit-outlined key="edit" />
      <ellipsis-outlined key="ellipsis" @click="getChange"/>
    </template>

    <a-card-meta :title="oilPipe.name" :description="oilPipe.currState.description">
      <template #avatar>
        <!-- <a-avatar src="https://joeschmoe.io/api/v1/random" /> -->
        <a-avatar src="/src/assets/icon/Coolingpumps.svg" />
      </template>
    </a-card-meta>
    <div class="content">
      <div class="left">
        <div class="m-state">
          <!-- <img class="state" src="/src/assets/icon/device_state.png"> -->
          <p>设备状态</p>

        </div>
        <div class="string">
          <img class="state" src="/src/assets/icon/normal.png">
          <span>
            {{ oilPipe.currState.string }}
          </span>

        </div>
      </div>
      <div class="right">
        <p>最大压力 <span>{{ oilPipe.maxPressure }}</span></p>
        <p>最小压力 <span>{{ oilPipe.operatingPressure }}</span></p>
      </div>
    </div>

  </a-card>
</template>
<script setup lang="ts">
import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
import { onMounted } from 'vue';
import { useRoute,useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();


// 定义属性
const props = defineProps({

  name: {
    type: [String],
    default: ''
  },
  oilPipe: {
    type: Object as any
  },
  cacheKey: { // 缓存key
    type: String
  },
  // 是否立即执行
  immediate: {
    type: Boolean,
    default: true
  },

})

const getChange = (key:any) => {
  router.push({ path: '/deviceMonitor/oilPipe',query: {name:props.oilPipe.name} })
// console.log('getChange--',key);
  console.log('getChange--',props.oilPipe.name);

}
onMounted(() => {
  console.log('$attrs---', props.oilPipe);
  console.log('rtrtrtrt');


})
</script>
<style lang="less" scoped>
.content {
  display: flex;
  margin-top: 20px;
  .left {
    display: flex;

    .m-state {
      display: flex;

      .state {
        width: 16px;
        height: 16px;
      }

      p {
        font-size: 16px;
      }
    }

    .string {
      margin-left: 10px;
      img {
        width: 14px;
        height: 14px;
      }

      font-size: 16px;
      color: rgb(7, 145, 99);
      font-weight: bold;
      span{
        margin-left: 5px;
      }
    }
  }

  .right {
    margin-left: 20px
  }

}
</style>